<template>
    <div>
        <van-popup v-model:show="showRight" position="right" @close="closePopup" :style="{ width: '75%', height: '100%' }">
            <div class="filter-popup">
                <!-- 所属组织 -->
                <div class="filter-section">
                    <div class="section-header">
                        <div class="section-title">所属组织</div>
                        <div class="section-actions">
                            <span class="reset-btn" @click="resetOrg">重置</span>
                            <span class="switch-label">只查本级</span>
                            <van-switch v-model="orgOnlyCurrentLevel" size="15px" />
                        </div>
                    </div>
                    <div class="tags-wrapper">
                        <div 
                            v-for="(tag, index) in selectedOrg" 
                            :key="index"
                            class="selected-tag"
                        >
                            {{ tag }}
                        </div>
                        <div class="more-btn" @click="goMore('org')">
                            更多
                        </div>
                    </div>
                </div>

                <!-- 资产项目 -->
                <!-- <div class="filter-section">
                    <div class="section-header">
                        <div class="section-title">资产项目</div>
                        <div class="section-actions">
                            <span class="reset-btn" @click="resetProject">重置</span>
                        </div>
                    </div>
                    <div class="tags-wrapper">
                        <div 
                            v-for="(tag, index) in selectedProject" 
                            :key="index"
                            class="selected-tag"
                        >
                            {{ tag }}
                        </div>
                        <div class="more-btn" @click="goMore('project')">
                            更多
                        </div>
                    </div>
                </div> -->

                <!-- 区域 -->
                <!-- <div class="filter-section">
                    <div class="section-header">
                        <div class="section-title">区域</div>
                        <div class="section-actions">
                            <span class="reset-btn" @click="resetRegion">重置</span>
                        </div>
                    </div>
                    <div class="tags-wrapper">
                        <div 
                            v-for="(tag, index) in selectedRegion" 
                            :key="index"
                            class="selected-tag"
                        >
                            {{ tag }}
                        </div>
                        <div class="more-btn" @click="goMore('region')">
                            更多
                        </div>
                    </div>
                </div> -->

                <!-- 资产类型 -->
                <!-- <div class="filter-section">
                    <div class="section-header">
                        <div class="section-title">资产类型</div>
                        <div class="section-actions">
                            <span class="reset-btn" @click="resetAssetType">重置</span>
                        </div>
                    </div>
                    <div class="tags-wrapper">
                        <div 
                            v-for="(tag, index) in selectedAssetType" 
                            :key="index"
                            class="selected-tag"
                        >
                            {{ tag }}
                        </div>
                        <div class="more-btn" @click="goMore('assetType')">
                            更多
                        </div>
                    </div>
                </div> -->
            </div>
        </van-popup>
    </div>
</template>
<script>
export default {
    name: 'vPopup',
    props: {},
    data() {
        return { 
            showRight: false,
            orgOnlyCurrentLevel: true,
            selectedOrg: ['深圳分公司'],
            selectedProject: ['中电长城大厦资产项目'],
            selectedRegion: ['广东省/深圳市/南山区/粤海街道'],
            selectedAssetType: ['公寓', '土地']
        }
    },
    methods: {
       open(){
        this.showRight = true
       },
       closePopup(e){
        this.$emit('close', e)
       },
       resetOrg() {
           this.selectedOrg = []
       },
       resetProject() {
           this.selectedProject = []
       },
       resetRegion() {
           this.selectedRegion = []
       },
       resetAssetType() {
           this.selectedAssetType = []
       },
       goMore(type) {
           // 根据类型跳转到不同的选择页面
                if (type === 'assetType') {
                    // 指定 key 为资产类型，确保目标页根据 params 触发对应接口请求
                    this.$router.push({ name: 'assectType', params: { key: 'zclx' }, query: { returnName: this.$route.name || '' } });
           } else if (type === 'region') {
               this.$router.push({ name: 'assectLocation'});
           } else {
               // 其他类型的更多页面
               console.log('打开更多选择:', type)
           }
       }
    }
}
</script>

<style scoped>
.filter-popup {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 20px 15px;
    overflow-y: auto;
}

.filter-section {
    margin-bottom: 25px;
}

.filter-section:last-child {
    margin-bottom: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.section-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reset-btn {
    font-size: 14px;
    color: #3772ff;
    cursor: pointer;
}

.switch-label {
    font-size: 14px;
    color: #333;
    margin-right: 5px;
}

.tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.selected-tag {
    padding: 6px 15px;
    border: 1px solid #3772ff;
    border-radius: 15px;
    background-color: transparent;
    color: #3772ff;
    font-size: 14px;
    white-space: nowrap;
    display: inline-block;
    line-height: 1.4;
}

.more-btn {
    padding: 6px 15px;
    border-radius: 15px;
    background-color: #f5f5f5;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.more-btn:active {
    background-color: #e8e8e8;
}
</style>